import React, { useEffect, useState } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import http from "../../axios/api";
import {
  NavBar,
  Collapse,
  List,
  Popup,
  Steps,
  Card,
  TextArea,
  Button,
  Empty,
  Toast
} from "antd-mobile";

import store from "store";

const Step = Steps.Step;

function Ticket() {
  const [params] = useSearchParams();
  const id = params.get("id");
  const [info, setInfo] = useState({});
  const navigate = useNavigate();

  const [leaveword, setLeaveword] = useState([]);

  useEffect(() => {
    const leavewordList = store.get("leavewordList");
    if (leavewordList) {
      setLeaveword(leavewordList);
    }
  }, []);



  const getDetials = async () => {
    const res = await http.get(`/api/trip/train/detail?id=${id}`);
    const { code, data } = res.data;
    if (code == 200) {
      setInfo(data);
    }
  };

  useEffect(() => {
    getDetials();
  }, []);



  const goToOrder = (price, type) => {
    navigate(`/orderList?id=${id}&price=${price}&type=${type}`);
  };

  return (
    <div>
      <NavBar>车票详情</NavBar>
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <div>
          <div>{info.start}</div>
          <div >{"10:00"}</div>
          <div>09-09 周五</div>
        </div>
        <div >
          <div>G103</div>
          <div


          >
            时刻表
          </div>
          <div>耗时 5时38分</div>
        </div>
        <div>
          <div>{info.end}</div>
          <div >11:58</div>
          <div>09-09 周五</div>
        </div>
      </div>


      <Collapse
        accordion
        style={{ marginTop: 20 }}
        arrowIcon={(active) =>
          active ? (
            <div>
              有票
              <span>预定</span>
            </div>
          ) : (
            <div>
              有票
              <span>收起</span>
            </div>
          )
        }
      >
        <Collapse.Panel
          key="1"
          title={
            <div >
              二等座
              <span>
                <b>￥</b> {info.tick?.secondTick}
              </span>
            </div>
          }
        >
          <List>
            <List.Item
         
              arrowIcon={
                <div>
                  <span
                    onClick={() =>
                      goToOrder(
                        info.tick?.secondTick,
                        "二等座"
                      )
                    }
                  >
                    改签
                  </span>
                </div>
              }
            >
              快速预定
            </List.Item>
            <List.Item
              description=""
              arrowIcon={
                <div>
                  <span
                    onClick={() =>
                      goToOrder(
                        info.tick?.secondTick,
                        "二等座"
                      )
                    }
                  >
                    改签
                  </span>
                </div>
              }
            >
              普通预定
            </List.Item>
          </List>
        </Collapse.Panel>

        <Collapse.Panel
          key="2"
          title={
            <div >
              一等座
              <span>
                <b>￥</b> {info.tick?.firstTick}
              </span>
            </div>
          }
        >
          <List>
            <List.Item
         
              arrowIcon={
                <div>
                  <span
                    onClick={() =>
                      goToOrder(
                        info.tick?.firstTick,
                        "一等座"
                      )
                    }
                  >
                    改签
                  </span>
                </div>
              }
            >
              快速预定
            </List.Item>
            <List.Item
              description=""
              arrowIcon={
                <div>
                  <span
                    onClick={() =>
                      goToOrder(
                        info.tick?.firstTick,
                        "一等座"
                      )
                    }
                  >
                    改签
                  </span>
                </div>
              }
            >
              普通预定
            </List.Item>
          </List>
        </Collapse.Panel>

        <Collapse.Panel
          key="3"
          title={
            <div >
              VIP座
              <span>
                <b>￥</b> {info.tick?.vip}
              </span>
            </div>
          }
        >
          <List>
            <List.Item
         
              arrowIcon={
                <div>
                  <span
                    onClick={() =>
                      goToOrder(
                        info.tick?.vip,
                        "VIP座"
                      )
                    }
                  >
                    改签
                  </span>
                </div>
              }
            >
              快速预定
            </List.Item>
            <List.Item
              description=""
              arrowIcon={
                <div>
                  <span
                    onClick={() =>
                      goToOrder(
                        info.tick?.vip,
                        "VIP座"
                      )
                    }
                  >
                    改签
                  </span>
                </div>
              }
            >
              普通预定
            </List.Item>
          </List>
        </Collapse.Panel>


      </Collapse>



    </div>
  );
}

export default Ticket;
